<template>
    <div class="choose">
        <div class="left_box">



            <ul class="lzx_box_ul">
                <li v-for="(item,index) in list" :key="index" @click="fnTurn(index)">
                    {{item.classifyName}}
                </li>



                <!-- <li>单鞋</li>
                <li>休闲鞋</li>
                <li>靴子</li>
                <li>凉鞋/拖鞋</li>
                <li>特色鞋</li>
                <li style="font-weight: 700">
                    | 香水
                </li>
                <li style="font-weight: 700">
                    | 包包
                </li>
                <li>单肩包</li>
                <li>双肩包</li>
                <li>手提包</li>
                <li>手拿包</li>
                <li>小方包</li>
                <li style="font-weight: 700">
                    | 帽子
                </li>
                <li>鸭舌帽</li>
                <li>渔夫帽</li>
                <li>草帽</li>
                <li>檐帽</li>
                <li>礼帽</li>
                <li>贝雷帽</li>
                <li style="font-weight: 700">
                    | 饰品
                </li>
                <li>项链</li>
                <li>手链</li>
                <li>耳环</li>
                <li>戒指</li>
                <li>手镯</li>
                <li style="font-weight: 700">
                    | 配件配饰
                </li>
                <li>袜子</li>
                <li>围巾</li> -->
            </ul>
        </div>
        <div class="right_box" v-if="list[index].list">
            <div 
                class="lzx_details"
                v-for="(item,index) in list[index].list"
                :key="index"
            >
                <img :src="'https://m.selected.com.cn' + item.miniprogramUrl"
                    alt="">
                <p>{{item.name}}</p>
            </div>

        </div>
    </div>
</template>

<script>
    import {
        List
    } from '@/api/goodsList'
    export default {
        data() {
            return {
                list: null,
                index:0,
            };
        },
        async created() {
            let res = await List();
            this.list = res.data.data
            console.log(this.list);
        },
        methods: {
            fnTurn(i) {
            this.index = i 
            }
        },
    }
</script>

<style lang="scss" scoped>
    .lzx_box_ul li {
        font-size: 12px;
        overflow: hidden;
    }

    .right_box {
        padding-top: 60px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .lzx_details {
        width: 150px;
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

    }

    .lzx_details img {
        width: 100%;
    }

    // ---------
    .choose {
        width: 100%;
        position: absolute;
        height: 100%;
        overflow: hidden;
        display: flex;
    }

    .left_box {
        position: absolute;
        overflow: auto;
        width: 20%;
        height: 100%;
        text-align: center;
        background-color: #f5f5f5;
    }

    .left_box li {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid rgba(229, 229, 229, 0.5);
        font-size: 14px;
    }

    // 右边
    .right_box {
        position: absolute;
        overflow: auto;
        left: 20%;
        height: 100%;
        width: 80%;
        vertical-align: top;
        background-color: #fbfbfb;
    }

    .lzx_commodity {
        float: left;
        width: 49.5%;
        background-color: #fff;
        margin-bottom: 5px;
    }

    .lzx_picture img {
        padding: 0 1.5px;
        width: 100%;
    }

    .lzx_details {
        padding: 5px 10px 10px 10px;
    }

    .lzx_details p:nth-child(1) {
        font-size: 14px;
        height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .lzx_details p:nth-child(2) {
        margin: 7px 0px 3px 0px;
        font-size: 12px;
        color: #999;
    }

    .lzx_details p:nth-child(3) {
        color: #e60011;
        font-size: 16px;
    }

    .bg {
        background: #fff;
    }
</style>